<template>
  <div class="dtailWraper">
  <div class="bodyWrap">
    <div ref="productTop" class="productTop">
     <div class="tabTitle" v-show="showFlag" ref="tabTitle">
       <span :class="{active:isActive}" @click="toTop">商品</span>
       <span :class="{active:!isActive}" @click="toDetail">详情</span>
     </div>
     <div class="tabScrollTitle" v-show="!showFlag" ref="tabTitletwo">
       <span :class="{active:isActiveTwo}" @click="toDetail">商品详情</span>
       <span :class="{active:!isActiveTwo}" @click="toParameter">规格参数</span>
     </div>
     <div class="banner" :id="'anchor_top'">
        <swiper :options="swiperOption"  ref="mySwiper" class="swiper-box">  
            <swiper-slide v-for="item in detailPic" :key="item.id" class="swiper-item"> 
                <img :src="imgPath(item.path)">
            </swiper-slide>  
            <div class="swiper-pagination" slot="pagination"></div>  
        </swiper> 
     </div>
     <div class="detailTitle">
       <p>{{cateDetailData.skuName}}</p>
       <span>¥{{cateDetailData.unitPrice}}</span>
       <span>¥{{cateDetailData.listPrice}}</span>
     </div>
     <div class="receiveAddress">
       <span>送至</span>
       <div class="selectAddress">
         <p>请选择收货地址</p>
         <i></i>
       </div>
     </div>
     <div class="tips" v-if="jdFlag" >
       <span><i></i>满159元免费运送</span>
       <span><i></i>京东发货&售后</span>
     </div>
     <div class="selectCate">
       <span>{{cateDetailData.selectValue}}</span>
       <span>1件</span>
       <i></i>
     </div>
  </div>
     <div ref="selectCon"  v-show="detaOrPramShowFlag">
        <div class="proPage" v-html="cateDetailData.note" v-show="jdFlag">
        </div>
        <div class="proTitle" v-show="!jdFlag">
          <p>{{cateDetailData.note}}</p>
        </div>
      </div>
      <div class="proParameter" v-html="cateDetailData.specification" v-show="!detaOrPramShowFlag" ref="anchorPara">
      </div>
      </div>
      <div class="scrollTop">
      <img src="../../assets/images/detaile/scrollTop.png" alt="" @click="scrollTop" v-show="scrollTopFlag">
      </div> 
  </div>
</template>

<script>
import { imgUrlJd } from "@/utils/mixin";
export default {
  data() {
    return {
      scrollHeight: "",
      showFlag: true,
      detaOrPramShowFlag: true,
      jdFlag: "",
      cateId: "",
      isActive: true,
      isActiveTwo: true,
      scrollTopFlag:false,
      cateDetailData: {},
      detailPic: [],
      swiperOption: {
        autoplay: 3500,
        pagination: ".swiper-pagination",
        paginationClickable: true,
        loop: true
      }
    };
  },
  mixins: [imgUrlJd],
  mounted() {
    this.$nextTick(() => {
      this.cateId = this.$route.query.id;
      this.getDetails();
      //监听滚动事件
      window.addEventListener("scroll", this._scroll);
      this.toTop();
    });
  },
  methods: {
    getDetails() {
      this.$axios
        .get(
          process.env.baseUrl +
            "/web-avicare-1.0/weixin/mall/findmdseskudetail/" +
            this.cateId
        )
        .then(res => {
          if (res.data.success) {
            this.cateDetailData = res.data.data;
            this.detailPic = this.cateDetailData.skuPic;
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    imgPath(path) {
      if (this.cateDetailData.type === "jd_mall") {
        this.jdFlag = true;
        return this.imgUrlJd(path);
      } else {
        this.jdFlag = true;
        return path;
      }
    },
    toDetail() {
      this.detaOrPramShowFlag = true;
      this.isActiveTwo = true;
      document.body.scrollTop = this.$refs.productTop.offsetHeight;
    },
    toParameter() {
      this.detaOrPramShowFlag = false;
      this.isActiveTwo = false;
     
      document.body.scrollTop = this.$refs.productTop.offsetHeight;
    },
    toTop() {
      document.body.scrollTop = -this.$refs.tabTitle.offsetHeight;
    },
    scrollTop() {
     this.toTop()
    },
    _scroll() {
      this.scrollHeight =
        document.documentElement.scrollTop || document.body.scrollTop;
      if (this.$refs.selectCon) {
        if (this.scrollHeight >= this.$refs.productTop.offsetHeight) {
          this.showFlag = false;
          this.scrollTopFlag=true
        } else {
          this.showFlag = true;
           this.scrollTopFlag=false
        }
      }
      if (this.$refs.anchorPara) {
        if (this.scrollHeight >= this.$refs.productTop.offsetHeight) {
          this.showFlag = false;
           this.scrollTopFlag=true
        } else {
          this.showFlag = true;
           this.scrollTopFlag=false
        }
      }
    }
  },
  destroyed() {
    window.removeEventListener("scroll", this._scroll);
  },
  watch: {},
  components: {}
};
</script>

<style lang="less">
.dtailWraper {
  width: 7.5rem;
  .bodyWrap {
    width: 7.5rem;
    height: auto;
    .productTop {
      width: 7.5rem;
      height: auto;
      .tabTitle {
        width: 100%;
        height: 0.8rem;
        padding: 0 2.5rem;
        box-sizing: border-box;
        position: fixed;
        top: 0;
        left: 0;
        background-color: hsla(0, 0%, 100%, 0.8);
        z-index: 10;
        span {
          font-size: 0.3rem;
          line-height: 0.4rem;
          display: inline-block;
          margin:0.2rem; 
          &:first-child {
            float: left;
          }
          &:last-child {
            float: right;
          }
        }
        .active {
          border-bottom: 1px solid blue;
        }
      }
      .tabScrollTitle {
        height: 0.8rem;
        background-color: #fff;
        color: #232323;
        padding: 0.15rem 1.27rem;
        box-sizing: border-box;
        font-size: 0.3rem;
        line-height: 0.4rem;
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 8;
        span {
          flex: 1;
          &:first-child {
            text-align: left;
            transition: all ease-in-out;
          }
          &:last-child {
            text-align: right;
            transition: all ease-in-out;
            border-left: 1px solid #eee;
          }
        }
        .active {
          color: rgb(120, 191, 255);
        }
      }
      .banner {
        height: 7.5rem;
        width: 100%;
        margin-top: 0.8rem;
        .swiper-box {
          height: 7.5rem;
          width: 100%;
          .swiper-wrapper {
            .swiper-item {
              img {
                width: 7.5rem;
                height: 7.5rem;
              }
            }
          }
          .swiper-pagination {
            .swiper-pagination-bullet {
              display: inline-block;
              border-radius: 100%;
              background: #000;
              opacity: 0.5;
            }
            .swiper-pagination-bullet-active {
              display: inline-block;
              border-radius: 100%;
              background-color: #fff;
            }
          }
        }
      }
      .detailTitle {
        margin: 0.1rem 0;
        background: #fff;
        p {
          padding: 0.2rem 0.3rem 0;
          color: #232323;
          font-size: 0.3rem;
          font-weight: 600;
        }
        span {
          padding-left: 0.3rem;
          display: block;
          &:nth-child(2) {
            text-align: left;
            font-size: 0.6rem;
            color: #232323;
            font-weight: 700;
          }
          &:last-child {
            color: #b0b0b0;
            font-size: 0.3rem;
            text-decoration: line-through;
            text-align: left;
          }
        }
      }
      .receiveAddress {
        padding: 0.2rem 0.3rem;
        background-color: #fff;
        span {
          font-size: 0.26rem;
          color: #707070;
          float: left;
          padding-right: 0.1rem;
        }
        .selectAddress {
          position: relative;
          p {
            font-size: 0.26rem;
            line-height: 0.37rem;
            color: #232323;
          }
          i {
            position: absolute;
            top: 0;
            right: 0;
            display: block;
            width: 0.42rem;
            height: 0.42rem;
            background-image: url(../../assets/images/detaile/detaile.png);
            background-size: 0.42rem;
          }
        }
      }
      .tips {
        padding: 0.2rem 0.3rem;
        background-color: #eee;
        overflow: hidden;
        margin: 0.1rem 0;
        span {
          position: relative;
          color: #232323;
          font-size: 0.22rem;
          float: left;
          margin-left: 0.4rem;
          &:last-child {
            margin-left: 0.8rem;
          }
          i {
            position: absolute;
            top: 0.05rem;
            left: -0.3rem;
            display: block;
            width: 0.2rem;
            height: 0.2rem;
            background-image: url(../../assets/images/detaile/full.png);
            background-size: 0.2rem;
          }
        }
      }
      .selectCate {
        position: relative;
        margin-top: 0.1rem;
        padding: 0.2rem 0.3rem;
        background-color: #fff;
        box-sizing: border-box;
        overflow: hidden;
        span {
          font-size: 0.3rem;
          color: #232323;
          float: left;
          &:first-child {
            padding-right: 0.2rem;
          }
        }
        i {
          position: absolute;
          top: 0.2rem;
          right: 0.3rem;
          display: block;
          width: 0.42rem;
          height: 0.42rem;
          background-image: url(../../assets/images/detaile/detaile.png);
          background-size: 0.42rem;
        }
      }
    }
    .proPage {
      padding-top: 0.1rem;
      box-sizing: border-box;
      width: 7.5rem;
      height: auto;
      * {
        max-width: 7.5rem !important;
        height: auto;
        border: 0;
        border-collapse: collapse;
        border-spacing: 0;
        font-size: 0;
        img {
          display: block;
          max-width: 7.5rem !important;
          height: auto !important;
        }
      }
      &:first-child {
        width: 100%;
      }
    }
    .proTitle {
      padding: 0.2rem 0.3rem;
      font-size: 0.4rem;
      color: #666;
      height: 0.4rem;
      line-height: 0.6rem;
    }
    .proParameter {
      margin-top: 0.1rem;
      box-sizing: border-box;
      width: 7.5rem;
      height: auto;
      background: #fff;
      text-align: left;
      margin-bottom: 10rem;
      overflow: hidden;
      * {
        box-sizing: border-box;
        border-left: 1px solid #e7e7e7;
        min-width: 7.5rem !important;
        height: auto;
        border: 0;
        border-collapse: collapse;
        border-top: 1px solid #e7e7e7;
        border-right: 1px solid #e7e7e7;
        border-bottom: 1px solid #e7e7e7;
        color: #848689;
        font-size: 0.3rem;
      }
      td,
      th {
        box-sizing: border-box;
        min-width: 3.75rem !important;
        padding: 0.1rem 0 0.1rem 0.3rem;
      }
    }
  }
  .scrollTop {
    position: relative;
    img {
      position: fixed;
      bottom: 1rem;
      right: 0.4rem;
      width: 0.7rem;
      height: 0.7rem;
    }
  }
}
</style>
